import React, {PureComponent} from 'react';
import {StyleSheet, View, Text, Image, TouchableOpacity, Platform} from 'react-native';
import {withNavigation} from 'react-navigation';

class Header extends PureComponent {
    static defaultProps = {
        theme: 'light',
        isShowLeftArrow: true,
        title: ''
    };

    render() {
        let {theme, isShowLeftArrow, title, leftIcon, wrapperStyle = {}, headerWrapStyle = {}, leftIconStyle = {}, titleStyle = {}, children, backFn} = this.props;
        leftIcon = leftIcon ? leftIcon : theme === 'light' ? require('../images/icon_left_2.png') : require('../images/icon_left_1.png');
        return (
            <View style={[styles.container, wrapperStyle]}>
                <View style={[styles.headerWrap, headerWrapStyle]}>
                    {
                        isShowLeftArrow ?
                            <TouchableOpacity onPress={() => {
                                backFn ? backFn() : this.props.navigation.goBack();
                            }}>
                                <Image source={leftIcon} style={[styles.leftIcon, leftIconStyle]}/>
                            </TouchableOpacity>
                            : null
                    }
                    {
                        title ?
                            <Text style={[styles.title, theme === 'dark' ? {color: '#fff'} : {}, titleStyle]}
                                  numberOfLines={1}>{title}</Text>
                            : null
                    }
                    {children}
                </View>
            </View>
        )
    }
}

const styles = StyleSheet.create({
    container: {
        ...Platform.select({
            ios: {
                height: 64,
                paddingTop: 20
            },
            android: {
                height: 44
            },
        }),
        backgroundColor: '#fff'
    },
    headerWrap: {
        width: '100%',
        height: 44,
        flexDirection: 'row',
        alignItems: 'center',
        paddingLeft: 12,
        paddingRight: 32
    },
    title: {
        fontSize: 16,
        fontWeight: 'bold',
        color: '#1b1b1b',
        textAlign: 'center',
        flex: 1
    },
    leftIcon: {
        width: 20,
        height: 20
    }
});

export default withNavigation(Header);